<template>
  <div class="about">
    <my-header>
      <template #center> 图书商城 </template>
      <template #right>
        <span class="right" @click="$router.push('/books')"> 我的书架 </span>
      </template>
    </my-header>
    <input type="text" class="searchInp" placeholder="请输入搜索的值" v-model="search" @keydown.enter="searchFtn">
    <div class="count">
       <my-cart v-for="(item,index) in showList" :key="index" :itemObj="item"></my-cart>
    </div>
  </div>
</template>
<script>
import myHeader from "../components/myHeader.vue";
import { reactive, toRefs } from 'vue';
import axios from 'axios';
import MyCart from '../components/myCart.vue';
export default {
  components: { myHeader, MyCart },
  setup(){
    const data = reactive({
      search: '', // 搜索的值
      allList: [], // 所有的图书数据
      showList: [], // 展示的数据
    })
    axios.get('data.json').then(res => {
      data.allList = res.data;
      data.showList = res.data;
    })
    const searchFtn = () => { // 搜索的事件
      //  console.log('vbnm,');
       data.showList = data.allList.filter(item => item.name.includes(data.search))
    }
    return {
      ...toRefs(data),
      searchFtn
    }
  }
};
</script>
<style lang="scss" scoped>
.about {
  height: 100%;
  background: #e9e9e9;
}
.right {
  font-size: 12px;
  color: rgba(72, 72, 185, 0.897);
}
.searchInp{
  border: none;
  background: #ccc;
  height: 36px;
  width: 100%;
  padding: 0 10px;
  outline: none;
}
.count{
  height: calc(100% - 86px);
  overflow-y: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>